<template>
  <div>
    <!-- 添加或修改现场巡查问题对话框 -->
    <jy-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="86px">
        <el-form-item label="项目名称" prop="projectId">
          <el-select v-model="form.projectId" placeholder="请选择项目名称" disabled style="width: 100%;"
            @change="projectChange">
            <el-option v-for="item in sysProjectList" :key="item.projectId" :label="item.projectName"
              :value="item.projectId" />
          </el-select>
        </el-form-item>
        <el-form-item label="标段名称" prop="bdId">
          <el-select v-model="form.bdId" placeholder="请选择标段名称" style="width: 100%;" @change="bdChange">
            <el-option v-for="item in bdSelect" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="里程桩号" prop="lczh">
          <el-input v-model="form.lczh" placeholder="请输入里程桩号" />
        </el-form-item>
        <el-form-item label="问题标题" prop="wtbt">
          <el-input v-model="form.wtbt" placeholder="请输入问题标题" />
        </el-form-item>
        <el-form-item label="存在问题" prop="czwt">
          <el-input v-model="form.czwt" placeholder="请输入存在问题" />
        </el-form-item>
        <el-form-item label="指派人员" prop="assignPeopleList">
          <el-tag v-for="(item, index) in form.assignPeopleList" :key="index" closable @close="delCopyUser(index)">{{
            item.nickName
          }}</el-tag>
          <el-button class="button-new-tag" type="primary" icon="el-icon-plus" size="mini" circle
            @click="selectCopyUser()" />
        </el-form-item>
        <el-form-item label="巡查时间" prop="xcsj">
          <el-date-picker clearable v-model="form.xcsj" type="date" value-format="yyyy-MM-dd" placeholder="请选择巡查时间"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="巡查上报人" prop="xcsbr">
          <el-input v-model="form.xcsbrName" placeholder="请输入巡查上报人" disabled />
        </el-form-item>
        <el-form-item label="整改要求" prop="zgyq">
          <el-input v-model="form.zgyq" placeholder="请输入整改要求" />
        </el-form-item>
        <el-form-item label="整改时限" prop="zgsx">
          <el-date-picker clearable v-model="form.zgsx" type="date" value-format="yyyy-MM-dd" placeholder="请选择整改时限"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="附件" prop="fileId">
          <fileUpload v-model="form.fileId" :oldList="form.fileIdOld" :fileType="[
            'png', 'jpg', 'jpeg', 'mp4']" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </jy-dialog>
    <address-book-select ref="addressBookSelectRef" @callBack="addCopyUser"></address-book-select>
  </div>
</template>

<script>
import { getInspectionIssue, addInspectionIssue, updateInspectionIssue } from "@/api/scene/inspectionIssue";
import { queryBdSelect } from "@/api/base/bsBd";
import { mapGetters } from "vuex";
import AddressBookSelect from '@/components/AddressBook/select.vue';

export default {
  name: "InspectionIssueAdd",
  dicts: ['scene_inspection'],
  components: {
    AddressBookSelect
  },
  props: {
    bdSelect: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 现场巡查问题表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "主键不能为空", trigger: "blur" }
        ],
        projectId: [
          { required: true, message: "项目名称不能为空", trigger: "change" }
        ],
        bdId: [
          { required: true, message: "标段名称不能为空", trigger: "change" }
        ],
        lczh: [
          { required: true, message: "里程桩号不能为空", trigger: "blur" }
        ],
        wtbt: [
          { required: true, message: "问题标题不能为空", trigger: "blur" }
        ],
        czwt: [
          { required: true, message: "存在问题不能为空", trigger: "blur" }
        ],
        xcsj: [
          { required: true, message: "巡查时间不能为空", trigger: "blur" }
        ],
        xcsbr: [
          { required: true, message: "巡查上报人不能为空", trigger: "blur" }
        ],
        zgyq: [
          { required: true, message: "整改要求不能为空", trigger: "blur" }
        ],
        zgsx: [
          { required: true, message: "整改时限不能为空", trigger: "blur" }
        ],
        // fileId: [
        //   { required: true, message: "附件id不能为空", trigger: "blur" }
        // ],

      }
    };
  },
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["sysProjectId", "sysProjectList", "nickName", "name", "userId"])
  },
  methods: {
    init (id) {
      this.reset();
      if (id) {
        this.form.id = id;
        this.getInfo();
        this.title = "修改现场巡查问题";
      } else {
        this.title = "添加现场巡查问题";
      }
      // this.getBdList();
      this.open = true;
    },
    getInfo () {
      this.loading = true;
      getInspectionIssue(this.form.id).then(response => {
        this.loading = false;
        this.form = response.data;
        if (this.form.fileId) {
          this.form.fileIdOld = this.form.fileId.split(',');
        }
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        id: undefined,
        projectId: this.sysProjectId,
        projectName: undefined,
        bdId: undefined,
        bdName: undefined,
        lczh: undefined,
        wtbt: undefined,
        czwt: undefined,
        xcsj: undefined,
        xcsbr: this.userId,
        xcsbrName: this.nickName,
        zgyq: undefined,
        zgsx: undefined,
        fileId: undefined,
        fileIds: [],
        fileIdOld: [],
        assignPeopleld: undefined,
        assignPeopleList: []
      };
      this.resetForm("form");
      this.setProjectName();
    },
    // 获取标段下拉
    getBdList () {
      queryBdSelect({ projectId: this.sysProjectId }).then(response => {
        this.bdSelect = response.data;
      });
    },
    projectChange () {
      this.setProjectName();
      this.getBdList();
    },
    setProjectName () {
      const a = this.sysProjectList;
      const b = this.form.projectId;
      const info = this.sysProjectList.find(item => item.projectId == this.form.projectId);
      this.form.projectName = info.projectName;
    },
    bdChange () {
      const info = this.bdSelect.find(item => item.id == this.form.bdId);
      this.form.bdName = info.name;
    },
    // 删除指派人员
    delCopyUser (index) {
      this.form.assignPeopleList.splice(index, 1);
    },
    // 选择指派人员
    selectCopyUser () {
      this.$refs.addressBookSelectRef.init();
    },
    // 添加指派人员
    addCopyUser (list) {
      const arr = [...this.form.assignPeopleList, ...list];
      let map = new Map();
      //去重
      arr.forEach((item) => {
        if (
          item !== undefined &&
          !map.get(item.userId) &&
          item.userId !== this.userId
        ) {
          map.set(item.userId, item);
        }
      });
      this.form.assignPeopleList = [...map.values()];
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.assignPeopleList.length == 0) {
            this.$message.warning('请选择指派人！');
            return;
          };
          if (this.form.fileId) {
            this.form.fileIds = this.form.fileId.split(',');
          }
          if (this.form.assignPeopleList) {
            const arr = this.form.assignPeopleList.map(item => item.userId);
            this.form.assignPeopleId = arr.join(',');
          }
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateInspectionIssue(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel();
              this.$emit('callBack');
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addInspectionIssue(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.cancel();
              this.$emit('callBack');
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.el-tag {
  margin-left: 10px;
  margin-bottom: 10px;
}

.button-new-tag {
  margin-left: 20px;
  margin-bottom: 10px;
}
</style>
